<template>
  <div style="background-color: white">
    <div style="margin-top: -10px">
      <el-menu default-active="/realTimeMonitoring" class="el-menu-demo" mode="horizontal" active-text-color="#54CACE" router="true"  >
        <el-menu-item index="/realTimeMonitoring" style="font-size: 20px; font-weight: bold; color: black">实时数据监控</el-menu-item>
        <el-menu-item index="/viewAllMonitoring" style="font-size: 20px; font-weight: bold;">所有站点摄像头</el-menu-item>
      </el-menu>
    </div>
    <div style="position: relative;">
      <img :src="video" style="width: 100%; height: 100%; object-fit: cover;">
      <button style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: transparent; border: none;">
        <img :src="playButton" style="width: 100px; height: 100px;" alt="Play Button">
      </button>
    </div>
  </div>
</template>
<script>
export default {
  name: "RealTimeMonitoring",
  data() {
    return{
      src : "src/temp/test.png",
      video : require('@/temp/537b851b26e94083b55008f0d915e8d2_mergeImage.png'),
      playButton : require('@/temp/img1.png'),
    }
  },
  methods:{
    change(){
      this.$router.push("/realTimeMonitoring")
    },
  }
}
</script>

<style scoped>
</style>
